<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<script src="jquery-3.6.0.min.js"></script>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style-type: none;}
			
			.tab{
				width: 1000px;
				margin: 100px auto;
				border: 1px solid #ccc;
			}
			
			.tab_list{border: 1px solid #ccc;
			background-color: #f1f1f1;
			height: 40px;line-height: 40px;}
			
			
			.tab_list li{float: left;
			width: 20%;
			height: 40px;
			line-height: 40px;
			text-align: center;}
			
			.tab_list li:hover{background-color: firebrick;color: #fff;}
			.current{background-color: firebrick;color: #fff;}
			.item{display: none;}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li>商品介绍</li>
					<li>规格与包装</li>
					<li>售后保证</li>
					<li>商品评价（5000）</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item" style="display: block;">商品介绍模块内容</div>
				<div class="item">规格与包装模块内容</div>
				<div class="item">售后保障模块内容</div>
				<div class="item">商品评价（5000）模块内容</div>
				<div class="item">手机社区模块内容</div>				
			</div>
		</div>
		<script>
			$(".tab_list li").eq(0).css({"background-color": "firebrick","color": "#fff"});
			$(".tab_list li").mousemove(function(){
				$(".tab_list li").eq(0).css({"background-color": "","color": ""});
				var index=$(this).index();
				$(".tab_con div").eq(index).show(300).siblings().hide();
			});
		</script>
	</body>
</html>